//添加输入框
import React, { Fragment } from "react";
import Shuiwen from "./Shuiwen";
import TemperatureInput from "./Temperatureinput";
import tryConvert from "./untile"

//ESM 和commonjs模块化又什么区别？

// 1 ESM模块化 引入模板 采用的是浅拷贝  commonjs是深拷贝

// 2 ESM模块移入模板的时候 代码必须写在所有js代码的顶部
// 而commonjs就是在任何位置使用require引入都可以

//react 数据流 自顶向下流动

//子传父 由父级的组件 通过props传递函数给子组件 子组件进行调用，传递实参，
//父组件函数体内容接收到参数就可以变更父级组件的数据了


class Jisuan extends React.Component {
  state = {
    temperature:'',//温度字段
    scale:"c"

  }
  //摄氏度输入发生变化的时候处理函数
  handleCelsiusInputChange = (tem)=>{
    console.log('摄氏度',tem);
    this.setState({
      temperature:tem,
      scale:'c'
    })
  }
  //华氏度输入发生变化的时候处理函数
  handleFahrenheitInputChange = (tem)=>{
    console.log('华氏度',tem);
    this.setState({
      temperature:tem,
      scale:'v'
    })
  }
  render() {
    //从state中结构temperature
    let {temperature,scale} = this.state

    //求摄氏度
    let celsius = scale === "c" ? temperature : tryConvert(temperature,"toCelsius")

    //求华氏度
    let fahrenheit = scale === "f" ? temperature : tryConvert(temperature,"toFahrenheit")

    return (
        //虚拟组件
      <Fragment>
        <TemperatureInput scale="c" temperature= {celsius} handleChange={this.handleCelsiusInputChange}></TemperatureInput>
        <TemperatureInput scale="v"  temperature= {fahrenheit} handleChange={this.handleFahrenheitInputChange} ></TemperatureInput>
        <Shuiwen temperature = {celsius}></Shuiwen>
      </Fragment>
    );
  }
}
export default Jisuan;
